<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>速翔网络</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<style>
	html,body{
		height: auto;
	}
		body {
			background: #f8f8f8;
			color: #222;
		}


		.dizhi,
		.shop,
		.liuyan,
		.pay {
			background: #fff !important;
		}

		.aui-btn img {
			width: 0.75rem;
		}

		.aui-title {

		}

		.dizhi {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 0.75rem;
			padding: 0 0.75rem;
			margin-top: 0.75rem;
		}

		.dizhi:before {
			content: "\e6f5";
			position: absolute;
			right: 0.75rem;
		}

		.dizhi .r {
			padding: 0.5rem 0;
			margin-left: 0.35rem;
		}

		.dizhi img {
			width: 1rem;
			height: 1rem;
			margin-right: 0.15rem;
		}

		.dizhi .r .mingzi {
			font-size: 0.75rem;
			padding-bottom: 0.25rem;
		}

		.dizhi .r .diqu {
			margin-right: 1rem;
			font-size: 0.6rem;
		}

		.shop {
			padding: 0.75rem;
			/*border-top: 1px solid #efefef;*/
			margin-top: 0.75rem;
		}

		.shop .h2 {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}

		.shop .h2 img {
			width: 0.7rem;
			height: 0.7rem;
		}

		.shop .h2 span {
			padding-left: 0.35rem;
			color: #555
		}

		.shop .info {
			display: flex;
			justify-content: flex-start;
			/*align-items: center;*/
			margin-top: 0.75rem;
		}

		.shop .info .img {
			width: 4rem;
			height: 4rem;
			margin-right: 0.75rem;
			border-radius: 0.25rem;
		}

		.shop .info .aui-ellipsis {
			height: 1.2rem;
			margin-bottom: 0.35rem;
		}

		.shop .info .p {
			color: #666;
			font-size: 0.65rem;
		}

		.shop .info .icon {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 0.35rem;
		}

		.shop .info .icon span {
			border: 1px solid #e6711e;
			color: #e6711e;
			margin: 0 0.25rem;
			font-size: 0.65rem;
			padding: 0 0.25rem;
		}

		.shop .info .num {
			padding-top: 1rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 0.75rem;
		}

		.shop .info .num .money {
			font-size: 0.75rem;
			color: #555;
		}

		.shop .info .num .i {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.shop .info .num .i span {
			background: #f3f0f0;
			border-radius: 50%;
			width: 1.4rem;
			height: 1.4rem;
			text-align: center;
			line-height: 1.4rem;
		}

		.shop .info .num .i span.z {
			background: none;
			width: 2rem;
		}

		.shop .info .num .i span.l {}

		.shop .info .num .i span.r {
			font-size: 1rem;
		}

		.liuyan {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0.75rem;
		}

		.liuyan div {
			width: 4rem;
		}

		.liuyan input {
			font-size: 0.7rem;
			height: auto;
			padding: 0.25rem 0;
			line-height: inherit;
		}

		.pay {
			padding: 0.75rem;
			margin-top: 0.75rem;
			margin-bottom: 4rem;
		}

		.pay .li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 0.75rem;
			margin-bottom: 0.75rem;
			border-bottom: 1px solid #efefef;
		}

		.pay .li:last-child {
			border: 0;
			margin-bottom: 0;
			padding-bottom: 0;
		}

		.pay .li .img {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.pay .li .img img {
			width: 1.2rem;
			margin-right: 0.35rem;
		}

		.pay .li .img span {
			font-size: 0.75rem;
		}

		.pay .li .input {
			width: 1rem;
			height: 1rem;
			border-radius: 50%;
			border: 1px solid #ccc;
		}

		.pay .li .em {
			background: #f00;
		}

		.pay .li .em:before {
			content: "\e6e5";
			color: #fff;
			font-size: 0.5rem;
			font-weight: bold;
			position: absolute;
			right: 0;
			top: 0.1rem;
			left: 0.2rem;
			bottom: 0;
		}

		.yinsi {
			margin-top: 0.75rem;
			text-align: center;
			font-size: 0.65rem;
			opacity: 0.8;
			color: #555;
		}

		.yinsi span {
			color: #3f51b5;
			padding: 0 0.15rem;
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
		}

		.footer .t {
			padding: 0.75rem;
			padding-bottom: 1rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
		}

		.footer .money b {
			font-size: 1.2rem;
			color: #FE2C55;
			padding-right: 0.25rem;
		}

		.footer .tijiao {
			background: #FE2C55;
			color: #fff;
			border-radius: 0.15rem;
			padding: 0.5rem 2rem;
			font-size: 0.65rem;
		}

		.dizhi .r .mobile {
			font-size: 0.65rem;
			color: #777;
			padding: 0 0.35rem;
		}

		.text {
			width: 100%
		}
		.text .shengyu{
			padding-bottom: 0.35rem;
			color: #555;
		}
	</style>
</head>

<body>
	<header class="aui-bar aui-bar-nav" id="sx-header">
		<a class="aui-pull-left aui-btn" tapmode onclick="_close()"><img src="../i/x.png" /></a>
		<div class="aui-title">确认订单</div>
	</header>
	<script id="sx-list" type="text/x-dot-template">
		<div class="dizhi" tapmode onclick="_url_shop({url:'shop_dizhi',title:'收货地址',xuanze:true,animation:true})">
			<img src="../i/shop/dizhi.png">
			<div class="r">
			{{? it.shop_dizhi}}
			<div class="mingzi">{{= it.shop_dizhi.xingming }}<span class="mobile">{{= it.shop_dizhi.mobile }}</span></div><div class="diqu aui-ellipsis">{{= it.shop_dizhi.diqu+it.shop_dizhi.dizhi }}</div>
			{{??}}
			请选择收货地址
			{{?}}
			</div>
		</div>
		<div class="shop">
			<div class="h2"><img src="../i/shop/dianpu.png"><span>{{= it.user.title}}</span></div>
			<div class="info">
				<img src="../i/loading_200.png" suxiangw-src="{{= _img(it.shop.img,api.winWidth/2.5)  }}" class="img">
				<div class="text">
					<div class="aui-ellipsis">{{= it.shop.title}}</div>
					<div class="shengyu">剩余<span>{{= it.shop.num}}件</span></div>
					<div class="p">下单后1-3天内发货</div>
					<div class="icon"><span>包邮</span><span>7天无理由退换</span></div>
					<div class="num">
						<div class="money">
							<b>{{= it.shop.money}}</b>元
						</div>
						<duv class="i">
							<span class="l" tapmode onclick="jia(1)">一</span>
							<span class="z" id="money_num">1</span>
							<span class="r" tapmode onclick="jia(1,true)">+</span>
						</duv>
					</div>
				</div>
			</div>
		</div>
		<div class="liuyan">
			<div>订单留言</div>
			<input type="text" name="" value="" id="liuyan" placeholder="选填，建议先与商家协商一致">
		</div>
		<div class="pay">
			<div class="li alipay" tapmode onclick="pay_xuan('alipay')">
				<div class="img">
					<img src="../i/share/alipay.png">
					<span>支付宝</span>
				</div>
				<div class="input aui-iconfont em" data-pay="ALI_APP"></div>
			</div>
			<div class="li weixin" tapmode onclick="pay_xuan('weixin')">
				<div class="img">
					<img src="../i/share/session.png">
					<span>微信支付</span>
				</div>
				<div class="input aui-iconfont" data-pay="WX_APP"></div>
			</div>
		</div>
		<div class="yinsi">
			您选择购买商品即视为已同意<span tapmode onclick="_page('用户协议',1)">《用户协议》</span>及<span tapmode onclick="_page('隐私政策',2)">《隐私政策》</span>
		</div>
	</script>
	<div class="aui-content aui-iconfont" id="sx-view">
		<div id="jiazai" style="padding-top:50%;"><img src="../i/loading_more.gif" /></div>
	</div>
	<div class="footer">
		<div class="t">
			<div class="money"><b id="money_pay">0</b>元</div>
			<div class="tijiao" tapmode onclick="tijiao()">
				提交订单
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../j/api.js"></script>
<script type="text/javascript">
	var dizhi_data, money_pay = 0,s_data;
	apiready = function() {
		_user = _getPrefs('_user');
		data();
		header = $api.byId('sx-header');
		$api.fixStatusBar(header);
		$api.fixTabBar($api.dom('.footer'));
		beecloud = api.require('beecloud');
	}

	function data() {
		_ajax('shop/pay_view', function(ret, err) {
			if (ret) {
				var evalData = doT.template($api.html($api.byId('sx-list')));
				$api.html($api.byId('sx-view'), evalData(ret));
				money_pay = ret.shop.money;
				s_data = ret.shop;
				dizhi_data = ret.shop_dizhi;
				_imageCache();
				api.parseTapmode();
				money();
			}
		}, {
			id: api.pageParam['id']
		})
	}

	function jia(id, type) {
		var _this = $('.info .num .z');
		var num = parseInt(_this.text());
		if (type) {
			_this.text(num + 1)
		} else {
			if (num == 1 || !num) {
				return;
			}
			_this.text(num - 1)
		}
		money();
		_zhen();
	}

	function pay_xuan(type) {
		$('.em').removeClass('em');
		$('.' + type + ' .input').addClass('em');
	}

	function dizhi(ret) {
		dizhi_data = ret = eval('(' + ret + ')');
		var html = '<div class="mingzi">' + ret.xingming + '<span class="mobile">' + ret.mobile + '</span></div><div class="diqu aui-ellipsis">' + ret.diqu + ret.dizhi + '</div>';
		$('.dizhi .r').html(html);
	}
	// 提交订单
	function tijiao() {
		if (!dizhi_data) {
			return _msg('请选择收货地址');
		}

		_loading('正在请求')
		var data = {};
		data.type = 3;
		data.channel = $('.pay .em').data('pay');
		data.shop_id = s_data.id;
		data.dizhi_id = dizhi_data.id;
		data.num =  parseInt($('#money_num').text());
		data.liuyan = $('#liuyan').val();
		data.money = (s_data.money * data.num) * 100;
		console.log(JSON.stringify(data))
		_ajax('member/pay_code', function(ret, err) {
			_loadingCloes()
			if(ret){
				if(ret.ret){
					var payData = {
						title: '用户(ID' + _user.id + ')购买商品id:'+s_data.id,
						totalfee: data.money,
						billno: ret.ret,
						channel: data.channel,
						optional: {
							uid: _user.id,
							payname: '用户(ID' + _user.id + ')购买商品id:'+s_data.id,
							type: data.type
						}
					};
					beecloud.pay(payData, payCallBack);
					function payCallBack(ret, err) {
						if (ret) {
							if (ret.result_code == 0) {
								_userInfo();
								if (ret.result_msg == '支付成功') {
									return _alert('付款成功，等待商家发货！', function(ret, err) {
										_close();
									})
								}
							}
							if (ret.errMsg) {
								//_alert(JSON.stringify(ret))
							} else {
								_msg(ret.result_msg)
							}
						} else {
							//_alert(JSON.stringify(err))
						}
					}
				}else{
					_msg(ret.err)
				}
			}
		},data)


	}

	function money() {
		var money_num = parseInt($('#money_num').text());
		$('#money_pay').text(money_num * money_pay)
	}
</script>

</html>
